// webpack 4.x 和 5.x 默认约定
    // 默认的打包入口文件 src -> index.js
    // 默认的输出文件路径 dist -> main.js
    // ps：可以在此文件中修改打包的默认约定 未按约定配置入口文件会报错

    const path = require('path')
    const HtmlPlugin = require('html-webpack-plugin')
    // 生产模式下自动删除旧版本的dist
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')

    // 复制页面到指定目录（内存） 方便webpack-dev-server运行
    const htmlPlugin = new HtmlPlugin({
        template: './src/index.html',
        filename: './index.html'
    })

    module.exports = {
        // mode代表 webpack 运行的模式，可选值有两个 development 和 production
        mode: 'development',
        // 快速定位到源码中报错的行号 方便调试
        // 开发：eval-source-map 生产：删去 || nosources-source-map
        devtool: 'eval-source-map',
        // entry修改打包入口文件路径
        entry: path.join(__dirname, './src/index.js'),
        // output修改打包输出文件路径
        output: {   
            path: path.join(__dirname, './dist'),
            filename: 'js/main.js'
        },
        resolve: {
            // 为 src 目录设置 @ 别名
            alias: {
                '@': path.join(__dirname, './src/')
            }
        },
        devServer: {
            open: true,
            host: 'localhost',
            port: 8080
        },
        module: {
            // webpack无法处理后缀非.js的文件 需要导入对应的loader
            // 如果调用的loader只有一个，可以传递字符串 loader有多个，必须传递数组
            rules: [
                { test: /\.css$/, use: ['style-loader', 'css-loader'] },
                { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
                // limit参数可以设置图片转base64的最大大小 outputPath指定发布版本打包路径
                { test: /\.jpg|png|gif$/, use: 'url-loader?limit=2048&outputPath=images' },
                // 使用babel-loader 处理高级的JS语法（排除node_modules）
                { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
            ]
        },
        // 插件数组
        plugins: [
            htmlPlugin, 
            new CleanWebpackPlugin()
        ]
    }